<template>
    <div>
    <div class="well">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="row">
                    <div class="col-md-10">
                        <form @submit.prevent="refresh(1)" method="post" class="navbar-form navbar-left no-margin no-padding">
                            <div class="form-group">
                                <span class="input-icon icon-left">
                                    <input v-model="search.date" name="date" type="text" placeholder="选择日期" class="form-control date-picker">
                                    <i class="fa fa-calendar"></i>
                                </span>
                            </div>

                            <div class="form-group">
                                <span class="input-icon icon-left">
                                    <input v-model="search.key" name="search" type="text" placeholder="输入搜索关键字" class="form-control">
                                    <i class="fa fa-search"></i>
                                </span>
                            </div>
                            <button type="submit" class="btn btn-default">搜索</button>
                        </form>
                    </div>

                    <div class="col-md-2 text-right margin-bottom-10">
                        <a v-owns:create class="btn btn-default btn-success" href="#/news/create">
                            添加 <i class="fa fa-plus"></i>
                        </a>
                    </div>
                </div>

                <table class="table table-bordered table-striped table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(news, key) in newss" v-bind:class="{ danger: news.status == 0 }">
                        <td>{{ key + 1 }}</td>
                        <td><a href="javascript:;" @click="showNews(news)">{{ news.title }}</a></td>
                        <td>{{ news.author }}</td>
                        <td>{{ news.updated_at }}</td>
                        <td>
                            <a v-bind:href="'#/news/' + news.id" v-owns:update
                               class="btn btn-default btn-xs btn-primary">编辑 <i class="fa fa-edit"></i></a>
                            <btn-destroy :id="news"></btn-destroy>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <!-- form modal -->
            <div class="modal bs-example-modal-lg" v-bind:id="'modal-' + name" tabindex="-1" news="dialog"
                 aria-labelledby="myModalLabel"
                 aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">{{ method + title }}</h4>
                        </div>
                        <form news="form" @submit.prevent="submit">
                            <div class="modal-body">
                                <!-- name -->
                                <div class="form-group" :class="{'has-error': errors.has('sort_name')}">
                                    <label for="sort_name-field">名称</label>
                                    <input v-model="news.sort_name" v-validate data-vv-rules="required|max:50"
                                           data-vv-as="名称"
                                           type="text" class="form-control" id="sort_name-field" name="sort_name"
                                           placeholder="请输入名称">

                                    <!-- error msg -->
                                    <span v-show="errors.has('sort_name')" class="help-block">{{ errors.first('sort_name') }}</span>
                                </div>

                                <!-- sort -->
                                <div class="form-group" :class="{'has-error': errors.has('sort')}">
                                    <label for="sort-field">排序</label>
                                    <input v-model="news.sort" v-validate data-vv-rules="required|numeric"
                                           data-vv-as="排序"
                                           type="text" class="form-control" id="sort-field" name="sort">

                                    <!-- error msg -->
                                    <span v-show="errors.has('sort')"
                                          class="help-block">{{ errors.first('sort') }}</span>
                                </div>

                                <!-- is_show -->
                                <div class="form-group">
                                    <label>是否显示</label>
                                    <div class="radio">
                                        <label class="no-padding">
                                            <input v-model="news.is_show" name="is_show" value="1" type="radio">
                                            <span class="text">是 </span>
                                        </label>
                                        <label>
                                            <input v-model="news.is_show" name="is_show" value="0" type="radio"
                                                   class="colored-danger">
                                            <span class="text">否 </span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

            <!-- 查看新闻 -->
            <div class="modal bs-example-modal-lg" id="show-news-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">新闻详情</h4>
                        </div>
                        <div class="modal-body no-padding-bottom">
                            <h3><strong>{{ news.title }}</strong></h3>
                            <p>
                                <i class="fa fa-user"></i> {{ news.author }}&nbsp;&nbsp;
                                <i class="fa fa-tag"></i> {{ news.news_sort.sort_name }}&nbsp;&nbsp;
                                <i class="fa fa-clock-o"></i> {{ news.created_at }}
                            </p>
                            <hr>
                            <p v-html="news.content"></p>
                            <hr>
                        </div>
                        <div class="modal-footer no-padding-top">
                            <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->

        </div>

    </div>
        <!-- 分页导航 -->
        <pagination style="margin-top: -10px;" :paginator="paginator"></pagination>
    </div>
</template>

<script>
    export default {
        mounted() {
            this.refresh();

            // form modal隐藏事件
            this.modal.on('hidden.bs.modal', response => {
                this.errors.clear();
            });

            // 实例化日期插件
            $('.date-picker').daterangepicker({
                format: 'YYYY-MM-DD',
                locale:{
                    applyLabel: '确认',
                    cancelLabel: '取消',
                    fromLabel: '从',
                    toLabel: '到',
                    weekLabel: 'W',
                    customRangeLabel: 'Custom Range',
                    daysOfWeek:["日","一","二","三","四","五","六"],
                    monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
                }
            });
        },
        data() {
            return {
                index: 0,
                name: this.$route.name,
                title: '新闻',
                news: {
                    news_sort: {}
                },
                newss: [],
                paginator: {},
                page: 1,
                search: {
                    key: '',
                    date: '',
                    page: 1,
                },
            }
        },
        methods: {
            /**
             * 添加
             */
            add() {
                this.news = {
                    sort_name: '',
                    sort: 200,
                    is_show: 1,
                };
                this.showForm();
            },

            /**
             * 编辑
             *
             * @param object news
             */
            edit(news) {
                this.setIndex(news);
                this.get(this.name + '/' + news.id + '/edit').then(response => {
                    this.news = response;
                    this.showForm();
                });
            },

            /**
             * 删除
             *
             * @param integer id 主键ID
             */
            destroy(news) {
                this.setIndex(news);
                this.confirm(() => {
                    this.delete(this.name + '/' + news.id).then(response => {
                        this.refresh();
                        this.alert(this.title + '删除成功！');
                    });
                });
            },

            /**
             * 提交表单
             */
            submit() {
                this.$validator.validateAll().then(result => {
                    if (result) {
                        let config = {
                            url: this.name + (this.news.id ? '/' + this.news.id : ''),
                            type: this.news.id ? 'PATCH' : 'POST',
                            data: this.news,
                        };

                        this.ajax(config).then(response => {
                            this.alert(this.title + this.method + '成功！');
                            this.modal.modal('hide');
                            this.refresh(config.type, response);
                        });
                    }
                });
            },

            /**
             * 更新数据
             */
            refresh(page = false) {
                if (page) {
                    this.search.page = page;
                }
                this.search.date = $("input[name='date']").val();



                this.get(this.name, this.search).then(response => {
                    this.newss = response.data;
                    this.paginator = response;
                });
            },

            /**
             * 显示表单模态框
             */
            showForm() {
                this.modal.modal('show');
            },

            /**
             * 设置当前操作元素索引
             */
            setIndex(news) {
                this.index = this.newss.indexOf(news);
            },

            /**
             * 显示新闻详情
             */
            showNews(news){
                this.news = news;
                console.log(this.news.news_sort.sort_name);
                $("#show-news-modal").modal('show');
            }
        },
        computed: {
            /**
             * 表单模态框
             *
             * @returns {*|jQuery|HTMLElement}
             */
            modal: function () {
                return $("#modal-" + this.name);
            },

            /**
             * 操作类型
             * @returns {string}
             */
            method: function () {
                return this.news.id ? '编辑' : '创建';
            },
        },
    }
</script>
